<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>注册</title>
    <!-- bootstrap样式，地图插件使用 -->
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <!-- 样式 -->
    <link rel="stylesheet" href="../../css/style.css" />
    <!-- 主题（主要颜色设置） -->
    <link rel="stylesheet" href="../../css/theme.css" />
    <!-- 通用的css -->
    <link rel="stylesheet" href="../../css/common.css" />
</head>
<style>
    html::after {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        content: '';
        display: block;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

    #swiper {
        overflow: hidden;
        margin: 0 auto;
    }

    #swiper .layui-carousel-ind li {
        width: 16px;
        height: 4px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, .3);
        border-radius: 0px;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 0 0px rgba(255, 0, 0, .8);
    }

    #swiper .layui-carousel-ind li.layui-this {
        width: 16px;
        height: 4px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, .3);
        border-radius: 0px;
        background-color: rgba(0, 85, 119, 1);
        box-shadow: 0 0 0px rgba(0, 85, 119, 1);
    }

    button,
    button:focus {
        outline: none;
    }

    .data-add-container .add .layui-select-title .layui-unselect {
        padding: 0 12px;
        height: 50px;
        font-size: 16px;
        color: #333;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(107, 104, 130, 1);
        background-color: #fff;
        box-shadow: 0 0 0px rgba(255, 0, 0, .8);
        text-align: left;
    }

    .data-add-container .add .layui-form-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
        margin: 0;
        position: inherit;
        background: transparent;
        border: 0;
    }

    .data-add-container .add .layui-input-block {
        margin: 0;
        flex: 1;
    }

    .data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
        margin: 0;
        flex: 1;
        display: flex;
    }
</style>

<body style="background: #EEEEEE; ">


    <div id="app">

        <!--
    <div class="layui-carousel" id="swiper">
        <div carousel-item id="swiper-item">
            <div v-for="(item,index) in swiperList" v-bind:key="index">
                <img class="swiper-item" :src="item.img">
            </div>
        </div>
    </div> -->
        <div class="layui-carousel" id="swiper"
            :style='{"boxShadow":"0 0px 0px #fff143","margin":"0 ","borderColor":"rgba(0,0,0,.3)","borderRadius":"0px","borderWidth":"0","width":"100%","borderStyle":"solid"}'>
            <div carousel-item id="swiper-item">
                <div v-for="(item,index) in swiperList" :key="index">
                    <img style="width: 100%;height: 100%;object-fit:cover;" :src="item.img" />
                </div>
            </div>
        </div>
        <!-- 轮播图 -->

        <div class="data-add-container"
            :style='{"padding":"20px","boxShadow":"0px 0px 0px rgba(255,0,0,.8)","margin":"50px auto","borderColor":"rgba(255, 0, 0, 0)","backgroundColor":"#fff","borderRadius":"10px","borderWidth":"0","borderStyle":"solid"}'>

            <form class="layui-form layui-form-pane add" lay-filter="myForm">

                <div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                    class="layui-form-item" pane>
                    <label
                        :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
                        class="layui-form-label">订单编号：</label>
                    <div class="layui-input-block">
                        <input
                            :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
                            v-model="detail.dingdanbianhao" type="text" :readonly="ro.dingdanbianhao"
                            name="dingdanbianhao" id="dingdanbianhao" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                    class="layui-form-item" pane>
                    <label
                        :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
                        class="layui-form-label">甜品名称</label>
                    <div class="layui-input-block">
                        <select name="shangpinmingcheng" id="shangpinmingcheng" lay-filter="shangpinmingcheng">
                            <option value="">请选择</option>
                            <option v-for="(item,index) in shangpinmingcheng" v-bind:key="index" :value="item">{{item}}
                            </option>
                        </select>
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                    class="layui-form-item" pane>
                    <label
                        :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
                        class="layui-form-label">甜品分类：</label>
                    <div class="layui-input-block">
                        <input
                            :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
                            v-model="detail.shangpinfenlei" type="text" :readonly="ro.shangpinfenlei"
                            name="shangpinfenlei" id="shangpinfenlei" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                    class="layui-form-item" pane>
                    <label
                        :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
                        class="layui-form-label">品牌：</label>
                    <div class="layui-input-block">
                        <input
                            :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
                            v-model="detail.pinpai" type="text" :readonly="ro.pinpai" name="pinpai" id="pinpai"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                    class="layui-form-item" pane>
                    <label
                        :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
                        class="layui-form-label">评分：</label>
                    <div class="layui-input-block">
                        <select name="pingfen" id="pingfen" lay-filter="pingfen">
                            <option value="">请选择</option>
                            <option v-for="(item,index) in pingfen" v-bind:key="index" :value="item">{{item}}</option>
                        </select>
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                    class="layui-form-item" pane>
                    <label
                        :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
                        class="layui-form-label">添加图片：</label>
                    <div class="layui-input-block">
                        <div v-if="detail.tianjiatupian" style="display:inline-block;margin-right:10px;">
                            <img id="tianjiatupianImg"
                                style="width: 100px;height: 100px;border-radius: 50%;border: 2px solid #EEEEEE;"
                                :src="detail.tianjiatupian">
                            <input type="hidden" :value="detail.tianjiatupian" id="tianjiatupian"
                                name="tianjiatupian" />
                        </div>
                        <button v-if="!ro.tianjiatupian"
                            :style='{"padding":"0 10px","boxShadow":"3px 3px 0px  #e0eee8","margin":"0 10px 0 0","borderColor":"#ccc","backgroundColor":"rgba(164, 226, 198, 1)","color":"rgba(157, 41, 51, 1)","borderRadius":"6px","borderWidth":"0","width":"auto","fontSize":"14px","borderStyle":"solid","height":"44px"}'
                            type="button" class="layui-btn btn-theme" id="tianjiatupianUpload">
                            <i v-if="true" :style='{"color":"rgba(157, 41, 51, 1)","show":true,"fontSize":"14px"}'
                                class="layui-icon">&#xe67c;</i>上传添加图片
                        </button>
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                    class="layui-form-item" pane>
                    <label
                        :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
                        class="layui-form-label">评价日期：</label>
                    <div class="layui-input-block">
                        <input
                            :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
                            type="text" name="pingjiariqi" id="pingjiariqi" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                    class="layui-form-item" pane>
                    <label
                        :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
                        class="layui-form-label">用户名：</label>
                    <div class="layui-input-block">
                        <input
                            :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
                            v-model="detail.yonghuming" type="text" :readonly="ro.yonghuming" name="yonghuming"
                            id="yonghuming" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                    class="layui-form-item" pane>
                    <label
                        :style='{"width":"110px","padding":"0 12px 0 0","fontSize":"16px","color":"rgba(107, 104, 130, 1)","textAlign":"left"}'
                        class="layui-form-label">联系电话：</label>
                    <div class="layui-input-block">
                        <input
                            :style='{"padding":"0 12px","boxShadow":"0 0 0px rgba(255,0,0,.8)","borderColor":"rgba(107, 104, 130, 1)","backgroundColor":"#fff","color":"#333","borderRadius":"4px","textAlign":"left","borderWidth":"1px","fontSize":"16px","borderStyle":"solid","height":"50px"}'
                            v-model="detail.lianxidianhua" type="text" :readonly="ro.lianxidianhua" name="lianxidianhua"
                            id="lianxidianhua" autocomplete="off" class="layui-input">
                    </div>
                </div>


                <div :style='{"padding":"10px","boxShadow":"0 0 0px #1685a9","margin":"0 0 10px 0","borderColor":"rgba(22, 133, 169, 1)","backgroundColor":"#fff","borderRadius":"0px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                    class="layui-form-item">
                    <div class="layui-input-block" style="text-align: right;">
                        <button
                            :style='{"padding":"0 10px","boxShadow":"8px 6px 6px #a1afc9","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(23, 124, 176, 1)","color":"#fff","borderRadius":"6px","borderWidth":"0","width":"25%","fontSize":"16px","borderStyle":"solid","height":"50px"}'
                            class="layui-btn btn-submit" lay-submit lay-filter="*">提交
                        </button>
                        <button
                            :style='{"padding":"0 10px","boxShadow":"6px 5px 6px #c2ccd0","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(214, 236, 240, 1)","color":"rgba(219, 90, 107, 1)","borderRadius":"6px","borderWidth":"0","width":"25%","fontSize":"16px","borderStyle":"solid","height":"50px"}'
                            type="reset" class="layui-btn layui-btn-primary">重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="../../layui/layui.js"></script>
    <script src="../../js/vue.js"></script>
    <!-- 组件配置信息 -->
    <script src="../../js/config.js"></script>
    <!-- 扩展插件配置信息 -->
    <script src="../../modules/config.js"></script>
    <!-- 工具方法 -->
    <script src="../../js/utils.js"></script>
    <!-- 校验格式工具类 -->
    <script src="../../js/validate.js"></script>
    <!-- 地图 -->
    <script type="text/javascript" src="../../js/jquery.js"></script>
    <script type="text/javascript"
        src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.AMapPositionPicker.js"></script>

    <script>
        var jquery = $;

        var vue = new Vue({
            el: '#app',
            data: {
                // 轮播图
                swiperList: [{
                    img: '../../img/banner.jpg'
                }],
                dataList: [],
                ro: {
                    dingdanbianhao: false,
                    shangpinmingcheng: false,
                    shangpinfenlei: false,
                    pinpai: false,
                    pingfen: false,
                    pingjianeirong: false,
                    tianjiatupian: false,
                    pingjiariqi: false,
                    yonghuming: false,
                    lianxidianhua: false,
                    sfsh: false,
                    shhf: false,
                },
                detail: {
                    dingdanbianhao: '',
                    shangpinmingcheng: '',
                    shangpinfenlei: '',
                    pinpai: '',
                    pingfen: '',
                    pingjianeirong: '',
                    tianjiatupian: '',
                    pingjiariqi: '',
                    yonghuming: '',
                    lianxidianhua: '',
                    sfsh: '',
                    shhf: '',
                },
                shangpinmingcheng: [],
                pingfen: [],
                centerMenu: centerMenu
            },
            updated: function () {
                layui.form.render('select', 'myForm');
            },
            computed: {},
            methods: {
                jump(url) {
                    jump(url)
                }
            }
        })


        layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate', 'tinymce'], function () {
            var layer = layui.layer;
            var element = layui.element;
            var carousel = layui.carousel;
            var http = layui.http;
            var jquery = layui.jquery;
            var form = layui.form;
            var upload = layui.upload;
            var laydate = layui.laydate;
            var tinymce = layui.tinymce

            // 获取轮播图 数据
            http.request('config/list', 'get', {
                page: 1,
                limit: 5
            }, function (res) {
                if (res.data.list.length > 0) {
                    var swiperItemHtml = '';
                    for (let item of res.data.list) {
                        if (item.name.indexOf('picture') >= 0 && item.value && item.value != "" && item.value != null) {
                            swiperItemHtml +=
                                '<div>' +
                                '<img style="width: 100%;height: 100%;object-fit:cover;" class="swiper-item" src="' + item.value + '">' +
                                '</div>';
                        }
                    }
                    jquery('#swiper-item').html(swiperItemHtml);
                    // 轮播图
                    vue.$nextTick(() => {
                        carousel.render({
                            elem: '#swiper',
                            width: '100%',
                            height: '600px',
                            arrow: 'hover',
                            anim: 'default',
                            autoplay: 'true',
                            interval: '3000',
                            indicator: 'inside'
                        });

                    })
                    // carousel.render({
                    // 	elem: '#swiper',
                    // 	width: swiper.width,height:swiper.height,
                    // 	arrow: swiper.arrow,
                    // 	anim: swiper.anim,
                    // 	interval: swiper.interval,
                    // 	indicator: "none"
                    // });
                }
            });

            http.request(`option/shangpinxinxi/shangpinmingcheng`, 'get', {}, (res) => {
                vue.shangpinmingcheng = res.data
            })
                ;
            form.on('select(shangpinmingcheng)', (data) => {
                console.log(data.value);
                http.request('follow/shangpinxinxi/shangpinmingcheng', 'get', {
                    columnValue: data.value
                }, function (res) {
                    vue.detail.shangpinfenlei = res.data.shangpinfenlei
                    vue.detail.pinpai = res.data.pinpai
                })
            })
                ;
            vue.pingfen = '1,2,3,4,5'.split(',')
            // 上传图片
            var tianjiatupianUpload = upload.render({
                //绑定元素
                elem: '#tianjiatupianUpload',
                //上传接口
                url: http.baseurl + 'file/upload',
                // 请求头
                headers: {
                    Token: localStorage.getItem('Token')
                },
                // 允许上传时校验的文件类型
                accept: 'images',
                before: function () {
                    //loading层
                    var index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                },
                // 上传成功
                done: function (res) {
                    console.log(res);
                    layer.closeAll();
                    if (res.code == 0) {
                        layer.msg("上传成功", {
                            time: 2000,
                            icon: 6
                        })
                        var url = http.baseurl + 'upload/' + res.file;
                        jquery('#tianjiatupian').val(url);
                        jquery('#tianjiatupianImg').attr('src', url)
                        vue.detail.tianjiatupian = url;
                    } else {
                        layer.msg(res.msg, {
                            time: 2000,
                            icon: 5
                        })
                    }
                },
                //请求异常回调
                error: function () {
                    layer.closeAll();
                    layer.msg("请求接口异常", {
                        time: 2000,
                        icon: 5
                    })
                }
            });
            laydate.render({
                elem: '#pingjiariqi'
            });

            // session独取
            let table = localStorage.getItem("userTable");
            http.request(`${table}/session`, 'get', {}, function (data) {
                // 表单赋值
                //form.val("myForm", data.data);
                data = data.data
                for (var key in data) {
                    if (key == 'yonghuming') {
                        vue.detail[`${key}`] = data[`${key}`]
                        continue;
                    }
                    if (key == 'lianxidianhua') {
                        vue.detail[`${key}`] = data[`${key}`]
                        continue;
                    }
                }
            });

            // 跨表
            if (http.getParam('corss')) {
                var obj = JSON.parse(localStorage.getItem('crossObj'));
                for (var o in obj) {
                    if (o == 'dingdanbianhao') {
                        vue.detail[o] = obj[o];
                        vue.ro.dingdanbianhao = true;
                        continue;
                    }
                    if (o == 'shangpinmingcheng') {
                        vue.detail[o] = obj[o];
                        vue.ro.shangpinmingcheng = true;
                        continue;
                    }
                    if (o == 'shangpinfenlei') {
                        vue.detail[o] = obj[o];
                        vue.ro.shangpinfenlei = true;
                        continue;
                    }
                    if (o == 'pinpai') {
                        vue.detail[o] = obj[o];
                        vue.ro.pinpai = true;
                        continue;
                    }
                    if (o == 'pingfen') {
                        vue.detail[o] = obj[o];
                        vue.ro.pingfen = true;
                        continue;
                    }
                    if (o == 'pingjianeirong') {
                        vue.detail[o] = obj[o];
                        vue.ro.pingjianeirong = true;
                        continue;
                    }
                    if (o == 'tianjiatupian') {
                        vue.detail[o] = obj[o];
                        vue.ro.tianjiatupian = true;
                        continue;
                    }
                    if (o == 'pingjiariqi') {
                        vue.detail[o] = obj[o];
                        vue.ro.pingjiariqi = true;
                        continue;
                    }
                    if (o == 'yonghuming') {
                        vue.detail[o] = obj[o];
                        vue.ro.yonghuming = true;
                        continue;
                    }
                    if (o == 'lianxidianhua') {
                        vue.detail[o] = obj[o];
                        vue.ro.lianxidianhua = true;
                        continue;
                    }
                }
            }


            // 提交
            form.on('submit(*)', function (data) {
                data = data.field;

                // 数据校验
                if (!data.pingfen) {
                    layer.msg('评分不能为空', {
                        time: 2000,
                        icon: 5
                    });
                    return false
                }
                if (!data.pingjianeirong) {
                    layer.msg('评价内容不能为空', {
                        time: 2000,
                        icon: 5
                    });
                    return false
                }

                // 跨表计算

                // 比较大小

                // 提交数据
                http.requestJson('shangpinpingjia' + '/add', 'post', data, function (res) {
                    layer.msg('提交成功', {
                        time: 2000,
                        icon: 6
                    }, function () {
                        back();
                    });
                });

                return false
            });

        });
    </script>
</body>

</html>